<template>
  <div class="hello">
    <m-header modile-title="点击增加input" go-back="true"></m-header>
    <div class="input-box" v-for="(i,k) in inputNum">
      <input type="text" :ref="'input'+k"/>
    </div>
    <div class="add-btn" @click="addInput">点击增加input+</div>
    <div class="del_btn" @click="delInput">删除input-</div>
    <div class="get-btn" @click="getValue">获取input值</div>




    <!--vue3写法-->
    <div class="vue3_box">
      <div class="add_lie">
        <input type="text" v-model="newtext" placeholder="请输入要添加的项">
        <button @click="addToDo()">添加</button>
      </div>

      <div class="remove_body">
        <div class="remove_lie" v-for="(item,index) in todos" :key="item.id">
          <input class="remove_input" readonly type="text" :value="item.text">
          <button class="remove_btn" @click="removeToDo(index)">删除</button>
        </div>
      </div>

      <div class="vue3_main">
        <div class="units_conversion">
          <div class="units_title">单位转换：</div>
          <div class="qianmi"><span>千米：</span><input type="text" v-model="kilometer" placeholder="请输入千米数"></div>
          <div class="mi"><span>米&nbsp;&nbsp;&nbsp;：</span><input type="text" v-model="meters" placeholder="请输入米数"></div>
          <div class="city_name"><span>城市名：</span><input type="text" v-model="cityname"/>
            <div class="city_change"><span>新城市名：</span>{{cityname}}<span>旧城市名：</span>{{oldname}}</div>
          </div>
        </div>
      </div>

    </div>


  </div>

</template>

<script>
  import mHeader from '../../../components/header'

  export default {
    data() {
      return {
        inputNum: 0,
        nameData: [], // 存放输入框值

        todos:[], // 展示内容
        newtext: '', // 用于存放新的输入的文本
        newId: 0, // 存放新的加入的id
        kilometer: 0, // 千米
        meters: 0, // 米
        cityname: '北京', // 城市名
        oldname: '', // 存放以前的城市名
      }
    },
    mounted() {
      this.addInput()
    },
    computed: {

    },
    watch:{ // watch对data里的kilometer和meters对象的监控
      kilometer(val){
        this.kilometer = val
        this.meters = this.kilometer*1000 // 千米转为米
      },
      meters(val){
        this.meters = val
        this.kilometer = this.meters/1000 // 米转为千米
      },
      cityname(newname,oldname){
        this.cityname = newname // 输入的新城市名
        this.oldname = oldname
      },
    },
    methods: {
      addInput() { // 确定添加的input文本框的个数
        if (this.inputNum < 5) {
          this.inputNum += 1
        }
      },
      delInput(){
        if (this.inputNum>1) {
          this.inputNum -= 1
        }
      },
      getValue() {
        let arr = [];
        for (var i = 0; i < this.inputNum; i++) {
          let inpu = 'input' + i; // 给每个input添加一个refs属性
          arr.push({
            index: "第" + i + "个",
            value: this.$refs[inpu][0].value // 根据refs获取每个input的值
          })
        }
        let shuzu = []
        for (var j = 0; j < arr.length; j++) {
          // console.log(arr[j].value)
          shuzu.push(arr[j].value)
          console.log(shuzu)
        }
        this.nameData = shuzu
      },


      // 新增值
      addToDo(){
        this.todos.push({
            id: this.newId++,
            text: this.newtext
          })
        this.newtext = ''
      },
      // 删除新增值
      removeToDo(index){
        this.todos.splice(index,1)
      }
    },
    components: {
      mHeader
    }
  }
</script>
<style lang="scss" scoped>
  .hello {
    padding-top: 50px;
    .input-box {
      border-bottom: 1px solid #f2f2f2;
      padding: 10px;
      input {
        width: 200px;
        height: 40px;
        border: 1px solid #333;
        border-radius: 5px;
      }
    }
    .add-btn {
      width: 200px;
      height: 30px;
      color: #fff;
      background: red;
      text-align: center;
      border-radius: 10px;
      line-height: 30px;
      margin-top: 10px;
    }
    .del_btn{
      width: 200px;
      height: 30px;
      color: #fff;
      background: #333333;
      text-align: center;
      border-radius: 10px;
      line-height: 30px;
      margin-top: 10px;
    }
    .get-btn {
      width: 120px;
      height: 30px;
      color: #fff;
      background: green;
      text-align: center;
      border-radius: 10px;
      line-height: 30px;
      margin-top: 10px;
    }

    .vue3_box{
      padding: 20px;
      .add_lie{
        width: 100%;
        align-items: center;
        display: inline-flex;
        input{
          padding: 15px;
          border: 1px solid #cccccc;
          outline: none;
          border-radius: 5px;
          font-size: 26px;
        }
        button{
          padding: 10px 20px;
          margin-left: 20px;
          background: #d86161;
          color: white;
          font-size: 28px;
          border: none;
          border-radius: 5px;
        }
      }
      .remove_body{
        margin-top: 20px;
        .remove_lie{
          display: inline-flex;
          margin-top: 20px;
          .remove_input{
            padding: 15px;
            border: 1px solid #cccccc;
            outline: none;
            border-radius: 5px;
            font-size: 26px;
          }
          .remove_btn{
            padding: 10px 20px;
            margin-left: 20px;
            background: white;
            color: #333333;
            font-size: 28px;
            border: none;
            border-radius: 5px;
          }
        }
      }
      .vue3_main{
        margin-top: 5%;
        .units_conversion{
          .units_title{
            font-size: 24px;
            margin-bottom: 10px;
          }
          .qianmi{
            margin-bottom:10px;
          }
          .city_name{
            margin-top: 10px;
            .city_change{
              span:last-child{
                margin-left: 20px;
              }
            }

          }
          input{
            padding: 10px;
            border: 1px solid #cccccc;
            outline: none;
            border-radius: 5px;
            font-size: 26px;
          }
          span{
            font-size: 24px;
          }
        }
      }

    }
  }
</style>
